<template>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '230px'">
            <el-col :span="40">
            <h3 style="text-align: center; color: aliceblue; cursor: pointer;" @click="toHomepage">
                <span>{{ isCollapse ? '动力' : '动力云客' }}</span>
            </h3>
            <!-- <el-menu
                active-text-color="#53b0a3"
                background-color="#2a3236"
                :default-active="openPage"
                text-color="#fff"
                :router = "true"
                :unique-opened="true"
                :collapse-transition="false"
                :collapse="isCollapse"
            >
                <el-sub-menu index="1">
                <template #title>
                    <el-icon ><OfficeBuilding /></el-icon>
                    <span>市场活动</span>
                </template>
                    <el-menu-item index="/dashboard/activity">
                        <el-icon ><School /></el-icon>
                        <span>市场活动</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Magnet /></el-icon>
                        <span>线索管理</span>
                    </template>
                    <el-menu-item index="/dashboard/clue">
                        <el-icon ><School /></el-icon>
                        <span>线索管理</span>
                    </el-menu-item>
                
                </el-sub-menu>
                <el-sub-menu index="3">
                <template #title>
                    <el-icon class="menu-icon"><UserFilled /></el-icon>
                    <span>客户管理</span>
                </template>
                    <el-menu-item index="/dashboard/customer">
                        <el-icon ><User /></el-icon>
                        <span>客户管理</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                <template #title>
                    <el-icon ><Sell /></el-icon>
                    <span>交易管理</span>
                </template>
                    </el-sub-menu>
                    <el-sub-menu index="5">
                    <template #title>
                        <el-icon ><Orange /></el-icon>
                        <span>产品管理</span>
                    </template>
                
                    </el-sub-menu>
                    <el-sub-menu index="6">
                    <template #title>
                        <el-icon ><Coin /></el-icon>
                        <span>字典管理</span>
                    </template>
                
                    </el-sub-menu>
                    <el-sub-menu index="7"  v-if="isShowUserManage">
                    <template #title>
                        <el-icon><User /></el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/dashboard/userManage">
                        <el-icon><User /></el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8">
                    <template #title>
                        <el-icon ><Setting /></el-icon>
                        <span>系统管理</span>
                    </template>
                    </el-sub-menu>
            </el-menu> -->
            <el-menu
                active-text-color="#53b0a3"
                background-color="#2a3236"
                :default-active="openPage"
                text-color="#fff"
                :router = "true"
                :unique-opened="true"
                :collapse-transition="false"
                :collapse="isCollapse"
            >
                <el-sub-menu :index="index+''" v-for="(menu,index) in loginUser.userObj.menuList" :key="index">
                    <template #title>
                        <el-icon ><OfficeBuilding /></el-icon>
                        <span>{{menu.name}}</span>
                    </template>
                        <el-menu-item :index="childMenu.url" v-for="(childMenu,index) in menu.cpermissionList" :key="index">
                            <el-icon ><School /></el-icon>
                            <span>{{ childMenu.name }}</span>
                        </el-menu-item>
                    </el-sub-menu>
            </el-menu>
    </el-col>
        </el-aside>
        <el-container>
        <el-header>
            <div @click="isCollapse = !isCollapse" style="cursor: pointer;">
                <el-icon><Fold /></el-icon>
            </div>
            <div>
                <el-dropdown style="border: 0px;">
                    <span class="el-dropdown-link">
                        {{ loginUser.userObj.name ? loginUser.userObj.name : "测试数据" }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>我的资料</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item divided @click="logoutDialogVisible = true">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-main>
        <div class="content">
            <router-view></router-view>
        </div>
        </el-main>
        <el-footer>
        @版权所有 2009-2099 作者: eastJ
        </el-footer>
    </el-container>
      </el-container>
      <!-- 退出登录提示框 -->
      <div class="logoutDiglog">
        <el-dialog
            v-model="logoutDialogVisible"
            title="退出登录"
            width="500"
        >
            <span>确定退出当前账号吗？</span>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="logoutDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="logout">
                    确认
                </el-button>
            </div>
            </template>
        </el-dialog>
      </div>
</template>
  
<script lang="ts" setup name="DashboardView">
import { ref, onMounted, reactive ,onBeforeMount} from 'vue'
import { LoginUser } from '@/hooks/LoginUser'
import { baseService } from '@/utils/httpReqest';
import { useLoginUserStore } from '@/stores/loginUser';
import { ElMessage } from "element-plus";
import router from '@/router';
import { useRoute } from 'vue-router';
// 使用pinia来储存 登陆用户信息
let loginUser = useLoginUserStore();
let isCollapse = ref(false);
let logoutDialogVisible = ref(false);
let isShowUserManage = ref(false);
let openPage = ref('');
let route = useRoute();
// 登陆完成后，加载登陆用户的信息
onBeforeMount(() => {
    baseService.doGet('/user/info').then(({ data }: any) => {
        for (const key in loginUser.userObj) {
            loginUser.userObj[key as keyof LoginUser] = data[key];
        }
        // 进行权限验证，是否展示 用户管理 选项
        let roleList: string[] = loginUser.userObj.roleList;
        isShowUserManage.value = roleList.includes("admin");
        // 默认展开路由
        let pathArr = route.path.split('/');
        if(pathArr.length > 3){
            openPage.value = "/"+pathArr[1]+"/"+pathArr[2]
        }else{
            openPage.value = route.path;
        }
    })
})
let logout = () => {
    logoutDialogVisible.value = false
    baseService.doGet('/logout', { id: loginUser.userObj.id }).then((res) => {
        ElMessage({
            message: '退出账号成功',
            type: 'success',
            plain: true,
        })
    }).catch((error) => {
        ElMessage({
            message: '退出账号成功',
            type: 'success',
            plain: true,
        })
    }).finally(() => {
        localStorage.removeItem("token")
        router.push("/");
    })
}
let toHomepage = () => {
    router.push("/dashboard");
}

</script>
<style scoped>
.el-aside {
    height: calc(100vh);
    background-color: #283237;
}

.el-main {
    padding: 10px;
}

.el-header {
    background-color: #53b0a3;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-footer {
    text-align: center;
    height: 30px;
}

.content {
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ------ */
.el-menu {
    border-right: 0 !important;
}

:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}
</style>